<script setup lang="ts">
import { computed } from "vue";
const props = defineProps({
  cardItem: {
    type: Object,
    default: () => {},
  },
  navFlag: {
    type: Number,
    default: 0,
  },
  title: {
    type: String,
    default: "",
  },
});
const bankCardNumber = computed(() => {
  return props.cardItem.bankCardNumber.slice(-4);
});
const getText = (status) => {
  return {
    0: "提现中",
    1: "提现成功",
    2: "提现失败",
  }[status];
};
</script>

<template>
  <view class="card-box flex">
    <view class="img">
      <image src="@/static/images/earnings.png" />
    </view>
    <view class="img-right">
      <view class="info-box flex space-between">
        <view class="title"
          >收益提现-到工商银行({{ bankCardNumber }}){{ cardItem.title }}</view
        >
        <view class="money">{{ cardItem.brokerage }}</view>
      </view>
      <view class="bottom-box">
        <view class="createTime">{{ cardItem.createTime }}</view>
        <view
          class="money"
          :style="{ color: cardItem.status == 2 ? 'red' : '#00B700' }"
          >{{ getText(cardItem.status) }}</view
        >
      </view>
      <!-- <view class="createTime">{{ cardItem.createTime }}</view> -->
    </view>
  </view>
</template>

<style lang="scss" scoped>
//
.card-box {
  width: 100%;

  .img {
    margin-right: 12rpx;

    image {
      width: 120rpx;
      height: 120rpx;
    }
  }

  .img-right {
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    border-bottom: 2rpx solid rgba(239, 239, 239, 1);

    // &:last-child {
    //   border-bottom: none;
    // }
  }

  .info-box {
    width: 570rpx;

    .title {
      flex: 0.8;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: rgba(51, 51, 51, 1);
      font-size: 32rpx;
    }

    .money {
      flex: 0.2;
      color: rgba(51, 51, 51, 1);
      font-size: 32rpx;
    }
  }

  .bottom-box {
    display: flex;
  }

  .createTime {
    margin-top: 28rpx;
    color: rgba(190, 190, 190, 1);
    font-size: 28rpx;
    flex: 1;
  }
  .money {
    margin-top: 28rpx;
    width: 80px;
    text-align: right;
    font-size: 28rpx;
  }
}
</style>
